<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		 <div id="app">
			 <!-- 循环
			 1.遍历数据
			 2.获取下标-->
			 <!-- 1.遍历数据-->
			<p v-for="item in array">{{item}}</p>
			<hr >
			<p v-for="item in array" v-text="item"></p>
			 <!-- 2.获取下标
			 v-for=""(遍历的元素, 遍历的下标) in array"-->
			 <p v-for="(item, index) in array" >
				下标:{{index}} &nbsp; 元素:{{item}}
			</p> <hr >
			<!-- 3,遍历对象 -->
			<p v-for="item in user">{{item}}</p>
			<p v-for="(value,key,index) in user">
			{{value}}~~{{key}}~~{{index}}
			</p>
			<hr >
			<!-- 3,遍历"集合" --><!-- p标签不能套p,可以div套p,或者div套div -->
			<div v-for="user1 in user1List">
				id:{{user1.id}}~name:{{user1.name}}~age:{{user1.age}}
				<div v-for="(value,key) in user1">
					{{value}}~~{{key}}
				</div>
			</div>
		 </div>
		 <hr >
		 <script src="../js/vue.js"> </script>
		 <script>
			
			const APP =new Vue({
				//1.注定区域
				el: "#app",
				data: {
						array: ["郭晶晶","陈艾森","朱婷"],
						user:{
							id:100,
							name:"oop",
							age:18
						},
						user1List:[{
							id:100,
							name:"oop",
							age:18
						},
						{id:200,
							name:"oop2",
							age:28
							
						}]
				}
			})
		 </script>
	</body>
</html>
